<template>
	<om-page title="头像" style="background-color: #F1F1F1;">
		<om-white-space size="large"></om-white-space>
		<om-white-space size="large"></om-white-space>
		<om-white-space size="large"></om-white-space>
		<image :src="userAvator" mode="aspectFit" style="width: 100%;"></image>
		<om-white-space size="large" class="margin-top"></om-white-space>
		<button style="width: 70%;" @click="selectAlbum">选择照片</button>
		<ot-cropper :src="tempFilePath" :showConfirmBtn="false" @confirm="confirm" @cancel="cancel"></ot-cropper>
		<!-- #ifdef APP || APP-PLUS || APP-NVUE || APP-PLUS-NVUE || APP-VUE -->
		<ot-authpup ref="authpup" type="top" @changeAuth="changeAuth" :permissionID="permissionID"></ot-authpup>
		<!-- #endif -->
	</om-page>
</template>

<script>
import { mapState } from 'pinia';
import {
		useLoginUserStore
	} from '@/stores/login-user.js';
export default {
	data() {
		return {
			items: [],
			userAvator: '',
			tempFilePath: '',
			permissionID: 'CAMERA',
			// maskShow: false,
		};
	},
	computed: {
		...mapState(useLoginUserStore, ['hasLogin', 'forcedLogin', 'userName', 'userId','avatar','sexCode'])
	},
	methods: {
		gotoOP(num){
			this.maskShow = false
			if(num == 1){
				_that.permissionID = 'WRITE_EXTERNAL_STORAGE'
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						if (res.tempFilePaths.length) {
							_that.tempFilePath = res.tempFilePaths[0];
						}
					}
				});
				setTimeout(()=>{
					_that.$refs['authpup'].open();
				},500)
			}else{
				_that.permissionID = 'CAMERA'
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						if (res.tempFilePaths.length) {
							_that.tempFilePath = res.tempFilePaths[0];
						}
					}
				});
				setTimeout(()=>{
					_that.$refs['authpup'].open();
				},500)
			}
		},
		maskCancel(){
			this.maskShow = false
		},
		changeAuth(){
			
		},
		avatarClick() {
			let _that = this;
			// #ifdef H5
			uni.chooseImage({
				count: 1,
				success: function(res) {
					console.log(JSON.stringify(res.tempFilePaths));
					if (res.tempFilePaths.length) {
						_that.tempFilePath = res.tempFilePaths[0];
					}
				}
			});
			// #endif
			
			// #ifdef APP || APP-PLUS || APP-NVUE || APP-PLUS-NVUE || APP-VUE
			uni.showModal({
				title: '提示',
				content: '请选择相册选取或者拍照？',
				cancelText: "相册", 
				confirmText: "拍照",
				showCancel: true,
				success: (res) => {
					if(res.confirm) {  
						_that.permissionID = 'CAMERA'
						uni.chooseImage({
							count: 1,
							sourceType: ['camera'],
							success: function(res) {
								console.log(JSON.stringify(res.tempFilePaths));
								if (res.tempFilePaths.length) {
									_that.tempFilePath = res.tempFilePaths[0];
								}
							}
						});
						setTimeout(()=>{
							_that.$refs['authpup'].open();
						},500)
					} else if (res.cancel) {  
						_that.permissionID = 'WRITE_EXTERNAL_STORAGE'
						uni.chooseImage({
							count: 1,
							sourceType: ['album'],
							success: function(res) {
								console.log(JSON.stringify(res.tempFilePaths));
								if (res.tempFilePaths.length) {
									_that.tempFilePath = res.tempFilePaths[0];
								}
							}
						});
						setTimeout(()=>{
							_that.$refs['authpup'].open();
						},500)
					}  
				} 
			})
			// #endif
		},
		selectAlbum() {
			let _that = this;

			// #ifdef H5
			uni.chooseImage({
				count: 1,
				success: function(res) {
					console.log(JSON.stringify(res.tempFilePaths));
					if (res.tempFilePaths.length) {
						_that.tempFilePath = res.tempFilePaths[0];
					}
				}
			});
			// #endif
			
			// #ifdef APP || APP-PLUS || APP-NVUE || APP-PLUS-NVUE || APP-VUE
			uni.showModal({
				title: '提示',
				content: '请选择相册选取或者拍照？',
				cancelText: "相册", 
				confirmText: "拍照",
				showCancel: true,
				success: (res) => {
					if(res.confirm) {  
						_that.permissionID = 'CAMERA'
						uni.chooseImage({
							count: 1,
							sourceType: ['camera'],
							success: function(res) {
								console.log(JSON.stringify(res.tempFilePaths));
								if (res.tempFilePaths.length) {
									_that.tempFilePath = res.tempFilePaths[0];
								}
							}
						});
						setTimeout(()=>{
							_that.$refs['authpup'].open();
						},500)
					} else if (res.cancel) {  
						_that.permissionID = 'WRITE_EXTERNAL_STORAGE'
						uni.chooseImage({
							count: 1,
							sourceType: ['album'],
							success: function(res) {
								console.log(JSON.stringify(res.tempFilePaths));
								if (res.tempFilePaths.length) {
									_that.tempFilePath = res.tempFilePaths[0];
								}
							}
						});
						setTimeout(()=>{
							_that.$refs['authpup'].open();
						},500)
					}  
				} 
			})
			// #endif
		},
		confirm(e) {
			let _that = this
			_that.tempFilePath = '';
			_that.om.request("temployee/uploadAvatar",
				{fileData:e.detail.tempFilePath},
				"post").then(res=>{
				if(res.succeed){
					if(res.value){
						_that.userAvator = e.detail.tempFilePath;
						_that.$store.commit("setAvatar",e.detail.tempFilePath);
					}else{
						_that.om.toast("头像上传失败，请重新上传")
					}
				}else{
					_that.om.toast(res.msg)
				}
			})
		},
		cancel() {
			console.log('canceled');
			this.tempFilePath="";
		}
	},
	onLoad(options) {
		let _that = this;
		_that.userAvator = _that.avatar || "/static/images/menus/image.png"
		if(this.sexCode && this.sexCode === "23593"){
			this.userAvator = this.avatar || "/static/images/menus/girl.png"
		}else{
			this.userAvator = this.avatar || "/static/images/menus/boy.png"
		}
	}
};
</script>

<style>
.page {
	background-color: #e5e5e5;
	height: 100%;
}
	.cancel-btn{
		text-align: center;
		display: block;
		color: #0081ff;
		background-color: #cce6ff;
		height: 36px;
		line-height: 36px;
		width: 72px;
		margin: 15px auto 0;
	}
	.mask{
		position: fixed;
		z-index: 99;
	}
	.mask .bg{
		opacity: 1;
	    position: fixed;
	    bottom: 0px;
	    top: 0px;
	    left: 0px;
	    right: 0px;
	    background-color: rgba(0, 0, 0, 0.4);
	    transition: opacity 300ms ease 0ms, -webkit-transform 300ms ease 0ms, transform 300ms ease 0ms;
	    transform-origin: 50% 50% 0px;
	}
	.mask .container{
		transform: scale(1);
		opacity: 1;
		position: fixed;
		display: flex;
		flex-direction: column;
		bottom: 0px;
		left: 0px;
		right: 0px;
		top: 0px;
		justify-content: center;
		align-items: center;
		transition: opacity 300ms ease 0ms, -webkit-transform 300ms ease 0ms, transform 300ms ease 0ms;
		transform-origin: 50% 50% 0px;
	}
	.mask .container .cont{
		width: 300px;
		background-color: white;
		border-radius: 10px;
		padding: 15px;
		box-sizing: border-box;
	}
	.mask .container .cont .tit{
		font-size: 16px;
		color: #b0b0b0;
		margin: 15px;
	}
	.mask .container .cont .show{
		
	}
</style>
